<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
    <style>
        .layui-col-space20>* {
            padding: 0 10px;
        }

        .wrap{
            padding: 20px;
        }

        .pic{
            position: absolute;
            right: 10%;
            top: 70px;
            width: 132px;
            height: 152px;
            padding: 10px;
            border:1px solid rgb(230,230,230);
        }

        .picwrap{
            display: flex;
            align-items: center;
            justify-content: center;
            max-height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="container layui-container">

        <div class="wrap">
            <h2>基本信息</h2>
            <hr class="layui-border-green">
            <form action="" class="layui-form layui-form-pane" style="margin-top: 20px"  lay-filter="info">
                <input type="hidden" name="id"/>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">学号</label>
                            <div class="layui-input-block">
                                <input type="text" name="code" required  lay-verify="required" placeholder="请输入学号" autocomplete="off" class="layui-input" th:disabled="${session.sysUser.roleType==3}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男" checked>
                                <input type="radio" name="sex" value="女" title="女">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">出生日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="birthday" id="birthday" lay-verify="required" placeholder="请输入出生日期" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">年级</label>
                            <div class="layui-input-block">
                                <input type="number" name="grade" lay-verify="required" placeholder="请输入年级" autocomplete="off" class="layui-input" th:disabled="${session.sysUser.roleType==3}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">学制(年)</label>
                            <div class="layui-input-block">
                                <input type="text" name="xz" readonly lay-verify="required" placeholder="请输入学制" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">班级</label>
                            <div class="layui-input-block">
                                <select name="clazzId" id="clazz" lay-verify="required" lay-filter="clazz" th:disabled="${session.sysUser.roleType==3}"></select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">学籍</label>
                            <div class="layui-input-block">
                                <select name="xj" lay-verify="required" lay-filter="xj" th:disabled="${session.sysUser.roleType==3}">
                                    <option value="在读">在读</option>
                                    <option value="休学">休学</option>
                                    <option value="退学">退学</option>
                                    <option value="转学">转学</option>
                                    <option value="毕业">毕业</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">学院</label>
                            <div class="layui-input-block">
                                <select name="academyId" id="academy" lay-verify="required" lay-filter="academy" th:disabled="${session.sysUser.roleType==3}"></select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">专业</label>
                            <div class="layui-input-block">
                                <select name="subjectId" id="subject" lay-verify="required" lay-filter="subject" th:disabled="${session.sysUser.roleType==3}"></select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">民族</label>
                            <div class="layui-input-block">
                                <input type="text" name="mz" lay-verify="required" placeholder="请输入民族" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">政治面貌</label>
                            <div class="layui-input-block">
                                <select name="zzmm" lay-verify="required" lay-filter="zzmm">
                                    <option value="群众">群众</option>
                                    <option value="共青团员">共青团员</option>
                                    <option value="中共党员">中共党员</option>
                                    <option value="民主党派成员">民主党派成员</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">籍贯</label>
                            <div class="layui-input-block">
                                <input type="text" name="jg" lay-verify="required" placeholder="请输入籍贯" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份证</label>
                            <div class="layui-input-block">
                                <input type="text" name="cardNo" lay-verify="required" placeholder="请输入身份证" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" required  lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">电子邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" name="email"  lay-verify="required|email" placeholder="请输入电子邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮编</label>
                            <div class="layui-input-block">
                                <input type="text" name="yb" required  lay-verify="required" placeholder="请输入邮编" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">家庭地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="address" required  lay-verify="required" placeholder="请输入家庭地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
                    </div>
                </div>
            </form>
            <div class="pic" id="uploadPic" th:if="${#request.getParameter('action')=='update'}">
                <div class="picwrap">
                    <img  alt="" width="100%">
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
</script>
<script th:inline="none">

    layui.use(['element', 'layer', 'form', 'table','laydate','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            upload = layui.upload,
            table = layui.table;
        var stuId = '';
        var action=''

        var stuObj={}
        var academys = []
        var subjects = {}
        var clazzs = {}

        initParam();
        getTree()

        // 搜索提交
        form.on('submit(save)', function (data) {
            update(data.field)
            return false;
        })

        form.on('select(academy)', function(data){
            var v = data.value

            var sbjs = subjects[v]
            $('#subject').empty().append(sbjs)
            if(sbjs && sbjs[0]){
                $('#subject').val(sbjs[0].value)
            }

            getSbj(sbjs[0].value)

            var clzs = clazzs[sbjs[0].value]
            $('#clazz').empty().append(clzs).val()
            if(clzs && clzs[0]){
                $('#clazz').val(clzs[0].value)
            }
            form.render('select')
        });

        form.on('select(subject)', function(data){
            var v = data.value
            console.log(clazzs[v])
            var clzs = clazzs[v]
            $('#clazz').empty().append(clzs)
            if(clzs && clzs[0]){
                $('#clazz').val(clzs[0].value)
            }
            form.render('select')

            getSbj(v)
        });

        laydate.render({
            elem: '#birthday',
            format: 'yyyyMMdd',
        });

        var uploadInst = upload.render({
            elem: '#uploadPic'
            ,url: '/ssms/sysUser/uploadPic'
            ,data:{uid:stuId}
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('.pic img').attr('src', result);
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code != 200){
                    return layer.msg('上传失败');
                }
                layer.msg('上传成功',{icon:6});
            }
        });

        function getSbj(sbjId) {
            $.get('/ssms/subject/getInfo?id=' + sbjId,function (res) {
                if(res.code == 200){
                    form.val('info',{
                        xz:res.data.xz
                    })
                    form.render()
                }
            })
        }

        function initParam() {
            var loc = location.href;
            var idx = loc.indexOf('?');
            var params = loc.substring(idx+1).split('&')
            params.map(function (value) {
                var arr = value.split('=');
                if(arr[0] == 'stuId'){
                    stuId = arr[1]
                }else if(arr[0] == 'action'){
                    action = arr[1]
                }
            })
            console.log(stuId,action)
        }

        function update(stu) {
            $.post('/ssms/sysUser/'+action+'/stu',stu,function (res) {
                if(res.code == 200){
                    if(action == 'update'){
                        layer.msg('更新成功',{icon:6})
                    }else{
                        var a = '<a target="ifm" href="/ssms/sysUser/student"></a>'
                        $(a)[0].click()
                    }
                }else{
                    layer.msg(res.msg,{icon:7})
                }
            })
        }

        function getInfo() {
            $.get('/ssms/sysUser/getInfo?stuId=' + stuId,function (res) {
                if(res.code == 200){
                    stuObj = res.data
                    console.log(stuObj)

                    $('#academy').append(academys)
                    var sbjs = subjects[stuObj.stuDetail.academyId]
                    $('#subject').append(sbjs)
                    $('#clazz').append(clazzs[stuObj.stuDetail.subjectId])

                    form.val('info',{
                        id:stuObj.id,
                        username:stuObj.username,
                        clazzId:stuObj.clazzId,
                        code:stuObj.code,
                        phone:stuObj.phone,
                        sex:stuObj.sex,
                        academyId:stuObj.stuDetail.academyId,
                        address:stuObj.stuDetail.address,
                        birthday:stuObj.stuDetail.birthday,
                        cardNo:stuObj.stuDetail.cardNo,
                        email:stuObj.stuDetail.email,
                        grade:stuObj.stuDetail.grade,
                        jg:stuObj.stuDetail.jg,
                        mz:stuObj.stuDetail.mz,
                        xj:stuObj.stuDetail.xj,
                        yb:stuObj.stuDetail.yb,
                        subjectId:stuObj.stuDetail.subjectId,
                        zzmm:stuObj.stuDetail.zzmm,
                        xz:stuObj.stuDetail.xz
                    })

                    var imgPath = stuObj.stuDetail.picPath
                    if(imgPath){
                        $('.pic img').attr('src', ctxPath+imgPath);
                    }

                    form.render('select')
                    form.render()
                }
            })
        }

        function getTree() {
            $.get("/ssms/academy/academyTree2",function (res) {
                if(res.code == 200){
                    treeArr = res.data;
                    treeArr.map(function (a) {
                        academys.push(new Option(a.title,a.id))
                        var sdjArr = []
                        var sbjs = a.children;
                        if(sbjs){
                            sbjs.map(function (b) {
                                sdjArr.push(new Option(b.title,b.id))
                                var clzArr = []
                                var clzs = b.children;
                                if(clzs){
                                    clzs.map(function (c) {
                                        clzArr.push(new Option(c.title,c.id))
                                    })
                                    clazzs[b.id] = clzArr;
                                }
                            })
                            subjects[a.id] = sdjArr;
                        }

                    })

                    if(action == 'add'){
                        $('#academy').append(academys)
                        $('#subject').append(subjects[academys[0].value])
                        $('#clazz').append(clazzs[subjects[academys[0].value][0].value])
                        form.render('select')
                    }else{
                        getInfo()
                    }
                }
            })
        }

    });
</script>
</body>
</html>